import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/china';
//  地图数据
const mapData = {
  citys: [
    {
        "name": "北京市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            116.407394,
            39.904211
        ]
    },
    {
        "name": "邯郸市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            114.538959,
            36.625594
        ]
    },
    {
        "name": "太原市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            112.548879,
            37.87059
        ]
    },
    {
        "name": "泰安市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            117.087614,
            36.200252
        ]
    },
    {
        "name": "武汉市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            114.305469,
            30.593175
        ]
    },
    {
        "name": "长沙市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            112.938884,
            28.22808
        ]
    },
    {
        "name": "广州市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            113.264385,
            23.12911
        ]
    },
    {
        "name": "深圳市",
        "symbolSize": "5",
        "itemStyle": {
            "normal": {
                "color": "#F58158"
            }
        },
        "value": [
            114.057939,
            22.543527
        ]
    }
]
};

export const mapOptions = (params) => ({
  title: {
    show: false,
    text: '超能小食堂点位图',
    left: 'center',
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    show: false,
  },
  geo: {
    nameMap: {
      China: '中国',
    },
    map: 'china',
    label: {
      emphasis: {
        show: false,
      },
    },
    zoom: 1.2,
    roam: true, //是否开启平游或缩放
    scaleLimit: { //滚轮缩放的极限控制
      min: 1,
      max: 5
    },

    itemStyle: {
      normal: {
        borderColor: 'rgba(255,209,163, .5)', //区域边框颜色
        areaColor: 'rgba(73,86,166,.1)', //区域颜色
        borderWidth: 0.5, //区域边框宽度
        shadowBlur: 5,
        shadowColor: 'rgba(107,91,237,.7)',
      },
      emphasis: {
        borderColor: '#FFD1A3',
        areaColor: 'rgba(102,105,240,.3)',
        borderWidth: 1,
        shadowBlur: 5,
        shadowColor: 'rgba(135,138,255,.5)',
      },
    },
  },
  series: [
    {
      name: '地点',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        brushType: 'stroke',
      },
      label: {
        emphasis: {
          show: true,
          position: 'right',
          formatter: '{b}',
        },
      },
      symbolSize: 2,
      showEffectOn: 'render',
      itemStyle: {
        normal: {
          color: '#46bee9',
        },
      },
      data: params,
    },
    // {
    //   name: '线路',
    //   type: 'lines',
    //   coordinateSystem: 'geo',
    //   zlevel: 2,
    //   zoom: 1,
    //   large: true,
    //   effect: {
    //     show: true,
    //     constantSpeed: 30,
    //     symbol: 'pin',
    //     symbolSize: 3,
    //     trailLength: 0,
    //   },
    //   lineStyle: {
    //     normal: {
    //       color: new echarts.graphic.LinearGradient(
    //         0,
    //         0,
    //         0,
    //         1,
    //         [
    //           {
    //             offset: 0,
    //             color: '#58B3CC',
    //           },
    //           {
    //             offset: 1,
    //             color: '#F58158',
    //           },
    //         ],
    //         false
    //       ),
    //       width: 1,
    //       opacity: 0.2,
    //       curveness: 0.1,
    //     },
    //   },
    //   data: params.moveLines,
    // },
  ],
});
 

//  线下门店流量
export const OfflinePortalOptions = params => (
  {
  color: ['#73A0FA', '#73DEB3', '#32C5E9', '#67E0E3'],
  tooltip: {
    // trigger: 'axis',
    // axisPointer: {
    //   type: 'cross',
    //   crossStyle: {
    //     color: '#999',
    //   },
    //   lineStyle: {
    //     type: 'dashed',
    //   },
    // },
    formatter(params){
      if(params.seriesType=="line"){
        params.data=params.data-30;
      }
      params.marker = params.marker.replace("[object Object]","#45fcfc")
      return params.name +"<br/>"+params.marker+params.data;
    }
  },
  grid: {
    left: '15',
    right: '15',
    bottom: '0',
    top: '30',
    containLabel: true,
  },
  legend: {
    // data: ['门店1'],
    show: true,
    textStyle: {
      color: '#BCDCFF',
    },
  },
  xAxis: [
    {
      type: 'category',
      data: params.xData,
      axisLabel: {
        color: '#BCDCF0',
        textStyle: {
          fontSize: 12,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: false,
      },
      boundaryGap: true,
    },
    {
      type: 'category',
      axisLabel: {
        color: '#BCDCF0',
        textStyle: {
          fontSize: 12,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: false,
      },
      boundaryGap: true,
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '单位/份',
      nameTextStyle: {
        color: '#BCDCFF',
      },
      axisLabel: {
        color: '#BCDCF0',
        textStyle: {
          fontSize: 12,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#252938',
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
      },
    },
    // {
    //   type: 'value',
    //   min: 0,
    //   max: 100,
    //   interval: 20,
    //   name: '密度',
    //   //网格样式
    //   splitLine: {
    //     show: false,
    //   },
    //   axisLine: {
    //     lineStyle: {
    //       color: '#94b5ca',
    //     },
    //   },
    // },
  ],
  series: [
    {
      name: '',
      type: 'line',
      data: params.data1.map(item=>{
        return item+30
      }),
    }, 
    {
      name: '',
      type: 'bar',
      data: params.data1,
      itemStyle: {
        normal: {
          label: {
            show: true,		//开启显示
            position: 'top',	//在上方显示
            textStyle: {	    //数值样式
                color: '#ffffff',
                fontSize: 12
            }
          },
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(34,224,214,.8)',
            },
            {
              offset: 0.5,
              color: 'rgba(5,137,186,1)',
            },
            {
              offset: 1,
              color: 'rgba(11,12,31,1)',
            },
          ]),
          barBorderRadius: 7.5,
        },
      },
      barMaxWidth: 15,
    },
  ],
}
);
